/**
* 首页
*/
import React, { Component } from 'react';
import { View, StyleSheet, Text, Image, TouchableOpacity, ScrollView, StatusBar, SafeAreaView, ImageBackground, DeviceEventEmitter } from "react-native";
import { connect } from 'react-redux';
import { Colors, Dimens, ImageRes } from '../../utils/Assets';
import { Actions } from 'react-native-router-flux';
import { create_service } from '../../redux/index.js';
import { Contract } from '../../service/index.js';
import { ProgressView } from '../custom/index'
import Toast from 'react-native-root-toast';
class PersonalTabView extends Component {

    constructor(props) {
        super(props);
        this.state = {
            loading: false
        }
        this.userInfo = props.userInfo
    }
    componentDidMount() {
        this.listener = DeviceEventEmitter.addListener('ReGetUserInfo', () => {
            this.getUserInfo()
        })
    }
    componentWillUnmount() {
    }
    componentWillReceiveProps(nextProps) {
        this.userInfo = nextProps.userInfo
    }
    getUserInfo() {
        this.setState({ loading: true })
        this.props.dispatch(create_service(Contract.POST_USER_INFO, { token: this.userInfo.token })).then((res) => {
            if (res) {
                this.props.dispatch({ type: 'SAVE_USER_INFO', data: { data: { user: res, token: this.userInfo.token } } });
            }
            this.setState({ loading: false })
        })
    }
    itemClick(index) {
        switch (index) {
            case '0':
                //我的银行卡
                if (this.userInfo && this.userInfo.user.real_name_status == "1") {
                    //已实名认证
                    Actions.BankCardListView({ rightTitle: '管理' })
                } else {
                    Toast.show("请先进行实名认证", { position: Toast.positions.CENTER })
                }
                break;
            case '1':
                //实名认证
                if (this.userInfo && this.userInfo.user.real_name_status == "0") {
                    //未实名认证
                    Actions.personalAuthOneView()
                }
                break;
            case '2':
                //系统通知
                Actions.personalSystemMessageView()
                break;
            case '3':
                //分享好友
                Actions.personalShareImageView()
                break;
            case '4':
                //意见反馈
                Actions.personalFeedbackView()
                break;
            case '5':
                //关于我们
                Actions.personalAboutUsView()
                break;
            case '6':
                //我的费率
                Actions.teamChangeRateView({ editable: false, title: '我的费率' })
                break;
            default:
                break;
        }
    }
    renderItem(icon, title, subTitle, index) {
        return (
            <TouchableOpacity style={{ backgroundColor: "#ffffff", paddingVertical: 20, flexDirection: 'row', justifyContent: "space-between" }} activeOpacity={0.8} onPress={() => {
                this.itemClick(index)
            }}>
                <View style={{ flexDirection: 'row' }}>
                    <Image style={{ width: 20, height: 20, alignSelf: 'center' }} source={icon} resizeMode={'contain'}></Image>
                    <Text style={{ fontSize: 15, color: "#333333", alignSelf: 'center', marginLeft: 15 }}>{title}</Text>
                </View>
                <View style={{ flexDirection: 'row' }}>
                    <Text style={{ fontSize: 15, color: "#999999", alignSelf: 'center', marginRight: 15 }}>{subTitle}</Text>
                    <Image style={{ width: 20, height: 20, alignSelf: 'center' }} source={ImageRes.team_right_arrow} resizeMode={'contain'}></Image>
                </View>
            </TouchableOpacity>
        )
    }
    render() {
        return (
            <View style={styles.container}>
                <ScrollView showsVerticalScrollIndicator={false}>
                    <ImageBackground source={ImageRes.personal_bg} style={styles.header} >
                        <Image source={this.userInfo ? { uri: this.userInfo.user.avatar } : ImageRes.personal_default_header} style={{ width: 70, height: 70, alignSelf: 'center', borderRadius: 35 }}></Image>
                        {this.userInfo && this.userInfo.user.real_name && <Text style={{ fontSize: 15, color: "#ffffff", alignSelf: 'center', marginTop: 15 }}>{this.userInfo.user.real_name}</Text>}
                        <TouchableOpacity style={{ position: 'absolute', top: Dimens.StatusBarHeight + 20, right: 20 }} activeOpacity={0.8} onPress={() => {
                            Actions.personalSettingView()
                        }}>
                            <Image source={ImageRes.personal_default_setting} style={{ width: 20, height: 20 }}></Image>
                        </TouchableOpacity>
                    </ImageBackground>
                    <View style={{ marginHorizontal: 15, marginTop: 15, backgroundColor: "#ffffff", borderRadius: 8, paddingHorizontal: 15 }}>
                        {this.renderItem(ImageRes.personal_bank, '我的银行卡', this.userInfo && this.userInfo.user.bank_number ? this.userInfo.user.bank_number + '张' : '0张', "0")}
                        {this.renderItem(ImageRes.personal_auth, '实名认证', this.userInfo && this.userInfo.user.real_name_status == "1" ? '已认证' : '未认证', "1")}
                    </View>
                    <View style={{ marginHorizontal: 15, marginTop: 15, backgroundColor: "#ffffff", borderRadius: 8, paddingHorizontal: 15 }}>
                        {this.renderItem(ImageRes.personal_notify, '系统通知', '', "2")}
                        {this.renderItem(ImageRes.personal_share, '分享好友', '', "3")}
                        {this.renderItem(ImageRes.personal_feedback, '意见反馈', '', "4")}
                        {this.renderItem(ImageRes.personal_about, '关于我们', '', "5")}
                    </View>
                    <View style={{ marginHorizontal: 15, marginTop: 15, backgroundColor: "#ffffff", borderRadius: 8, paddingHorizontal: 15 }}>
                        {this.renderItem(ImageRes.personal_my_rate, '我的费率', '', "6")}
                    </View>
                    <View style={{ backgroundColor: Colors.bg_color, height: 20 }}></View>
                </ScrollView>
            </View >
        )
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: Colors.bg_color,
        paddingBottom: Dimens.isIPhoneX ? 15 : 0,
        flex: 1
    },
    header: {
        paddingTop: Dimens.StatusBarHeight,
        width: Dimens.DeviceWidth,
        height: Dimens.DeviceWidth * 0.58,
        justifyContent: 'center'
    }
});
function mapStateToProps(state) {
    return {
        userInfo: state.auth.userInfo
    }
}
const ExportView = connect(mapStateToProps)(PersonalTabView);
module.exports.PersonalTabView = ExportView
